<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<meta charset="utf-8">
	<title>webkit-box-flex demo</title>
	

<link rel="stylesheet" type="text/css" href="box-flex_002.css" media="all">
</head>
<body>
	<h1>-webkit-box-flex:</h1>
	<dl id="control_panel" class="control_panel">
		
	</dl>
	<p>
		-webkit-box-flex：父容器800px，最后一个box定宽200px，前两个box按3:2自动分配宽度。<br>
		需要注意的是flex属性分配的是<strong style="color: red;">剩余宽度</strong>。剩余宽度=父容器宽度-子容器固定宽度（优先）/子容器内容宽度-子容器margin&amp;border&amp;padding
	</p>
	<div class="demo">
		<!-- demo start -->
		<div class="test">
			<div class="flex_3">flex-3</div>
			<div class="flex_2">flex-2</div>
			<div class="flex_w200">内容炒鸡多炒鸡多炒鸡多炒鸡多炒鸡多炒鸡多炒鸡多~</div>
		</div>
		<!-- demo end -->
	</div>
	



</body>
</html>
